<div [ngClass]="{ 'lv-tag-main': true, 'lv-tag-checkable': lvCheckable }" *ngIf="isFirefoxBelowRecentVersions; else animationBox">
  <ng-container *ngTemplateOutlet="tagMain"></ng-container>
</div>

<ng-template #animationBox>
  <div [ngClass]="{ 'lv-tag-main': true, 'lv-tag-checkable': lvCheckable }" [@tagMotion]="tagList?.length" (@tagMotion.done)="lvMotionDone.emit($event)">
    <ng-container *ngTemplateOutlet="tagMain"></ng-container>
  </div>
</ng-template>

<ng-template #tagMain>
  <div
    class="lv-tag-item"
    *ngFor="let item of tagList; let index = index; let count = count; let even = even; let first = first; let last = last; let odd = odd; trackBy: lvTrackBy"
    [ngClass]="{
      disabled: item.disabled,
      'lv-tab-item-removable': clearable(item),
      'lv-tag-item-checked': judgeIsChecked(item)
    }"
    [ngStyle]="{ maxWidth: tagMaxWidth }"
    (click)="clickItem($event, item)"
  >
    <!-- 默认 -->
    <ng-container *ngIf="!lvTagTemplate">
      <div class="lv-tag-text" lv-overflow>{{ item.label }}</div>
    </ng-container>
    <!-- 自定义 -->
    <ng-container *ngIf="lvTagTemplate">
      <ng-container
        *ngTemplateOutlet="lvTagTemplate; context: { $implicit: item, index: index, count: count, even: even, first: first, last: last, odd: odd }"
      ></ng-container>
    </ng-container>

    <i *ngIf="clearable(item)" class="lv-tag-remove" [lvDisabled]="item.disabled" lv-icon="lv-icon-clear" (click)="removeItem($event, item)"></i>
  </div>
  <div class="lv-tag-clear" *ngIf="lvShowClearAll && tagList?.length" (click)="clearAll($event)" [ngClass]="{ disabled: !hasRemoveItem }">
    {{ 'clearAll' | i18n }}
  </div>
  <ng-container *ngIf="lvExtraContent && tagList">
    <ng-container *ngTemplateOutlet="lvExtraContent; context: { $implicit: tagList }"></ng-container>
  </ng-container>

  <ng-content></ng-content>
</ng-template>
